<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2426801" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a7;</span>
                <div class="name">editor-map-google</div>
                <div class="code-name">&amp;#xe9a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a8;</span>
                <div class="name">editor-outdent</div>
                <div class="code-name">&amp;#xe9a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a9;</span>
                <div class="name">editor-margin-bottom</div>
                <div class="code-name">&amp;#xe9a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9aa;</span>
                <div class="name">editor-music</div>
                <div class="code-name">&amp;#xe9aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9ab;</span>
                <div class="name">editor-paging</div>
                <div class="code-name">&amp;#xe9ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9ac;</span>
                <div class="name">editor-map-baidu</div>
                <div class="code-name">&amp;#xe9ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9ad;</span>
                <div class="name">editor-margin-top</div>
                <div class="code-name">&amp;#xe9ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9ae;</span>
                <div class="name">editor-pic-right</div>
                <div class="code-name">&amp;#xe9ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9af;</span>
                <div class="name">editor-pic-center</div>
                <div class="code-name">&amp;#xe9af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b0;</span>
                <div class="name">editor-paragraph</div>
                <div class="code-name">&amp;#xe9b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b1;</span>
                <div class="name">editor-paste-txt</div>
                <div class="code-name">&amp;#xe9b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b2;</span>
                <div class="name">editor-pic-left</div>
                <div class="code-name">&amp;#xe9b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b3;</span>
                <div class="name">editor-preview</div>
                <div class="code-name">&amp;#xe9b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b4;</span>
                <div class="name">editor-paste</div>
                <div class="code-name">&amp;#xe9b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b5;</span>
                <div class="name">editor-printer</div>
                <div class="code-name">&amp;#xe9b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b6;</span>
                <div class="name">editor-quotation-marks-left</div>
                <div class="code-name">&amp;#xe9b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b7;</span>
                <div class="name">editor-redo</div>
                <div class="code-name">&amp;#xe9b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b8;</span>
                <div class="name">editor-screen-exit</div>
                <div class="code-name">&amp;#xe9b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9b9;</span>
                <div class="name">editor-row-add</div>
                <div class="code-name">&amp;#xe9b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9ba;</span>
                <div class="name">editor-quotation-marks-right</div>
                <div class="code-name">&amp;#xe9ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9bb;</span>
                <div class="name">editor-screen-full</div>
                <div class="code-name">&amp;#xe9bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9bc;</span>
                <div class="name">editor-row-delete</div>
                <div class="code-name">&amp;#xe9bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9bd;</span>
                <div class="name">editor-screenshot</div>
                <div class="code-name">&amp;#xe9bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9be;</span>
                <div class="name">editor-single-quotation marks-right</div>
                <div class="code-name">&amp;#xe9be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9bf;</span>
                <div class="name">editor-subscript</div>
                <div class="code-name">&amp;#xe9bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c0;</span>
                <div class="name">editor-special-characters</div>
                <div class="code-name">&amp;#xe9c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c1;</span>
                <div class="name">editor-single-quotation marks-left</div>
                <div class="code-name">&amp;#xe9c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c2;</span>
                <div class="name">editor-superscript</div>
                <div class="code-name">&amp;#xe9c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c3;</span>
                <div class="name">editor-strikethrough</div>
                <div class="code-name">&amp;#xe9c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c4;</span>
                <div class="name">editor-selectall</div>
                <div class="code-name">&amp;#xe9c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c5;</span>
                <div class="name">editor-table</div>
                <div class="code-name">&amp;#xe9c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c6;</span>
                <div class="name">editor-text</div>
                <div class="code-name">&amp;#xe9c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c7;</span>
                <div class="name">editor-template</div>
                <div class="code-name">&amp;#xe9c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c8;</span>
                <div class="name">editor-to-capitalize</div>
                <div class="code-name">&amp;#xe9c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9c9;</span>
                <div class="name">editor-undo</div>
                <div class="code-name">&amp;#xe9c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9ca;</span>
                <div class="name">editor-vertical-bottom</div>
                <div class="code-name">&amp;#xe9ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9cb;</span>
                <div class="name">editor-typesetting</div>
                <div class="code-name">&amp;#xe9cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9cc;</span>
                <div class="name">editor-vertical-both</div>
                <div class="code-name">&amp;#xe9cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9cd;</span>
                <div class="name">editor-vertical-center</div>
                <div class="code-name">&amp;#xe9cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9ce;</span>
                <div class="name">editor-to-lowercase</div>
                <div class="code-name">&amp;#xe9ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9cf;</span>
                <div class="name">editor-vertical-left</div>
                <div class="code-name">&amp;#xe9cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9d0;</span>
                <div class="name">editor-underline</div>
                <div class="code-name">&amp;#xe9d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9d1;</span>
                <div class="name">editor-vertical-top</div>
                <div class="code-name">&amp;#xe9d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9d2;</span>
                <div class="name">editor-vertical-right</div>
                <div class="code-name">&amp;#xe9d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9d3;</span>
                <div class="name">editor-align-center</div>
                <div class="code-name">&amp;#xe9d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9d4;</span>
                <div class="name">editor-video</div>
                <div class="code-name">&amp;#xe9d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9d5;</span>
                <div class="name">editor-align-both</div>
                <div class="code-name">&amp;#xe9d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea6c;</span>
                <div class="name">editor-time</div>
                <div class="code-name">&amp;#xea6c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe957;</span>
                <div class="name">editor-align-left</div>
                <div class="code-name">&amp;#xe957;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe958;</span>
                <div class="name">editor-bg</div>
                <div class="code-name">&amp;#xe958;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe959;</span>
                <div class="name">editor-align-right</div>
                <div class="code-name">&amp;#xe959;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe95a;</span>
                <div class="name">editor-attachment</div>
                <div class="code-name">&amp;#xe95a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe95b;</span>
                <div class="name">editor-bgcolor</div>
                <div class="code-name">&amp;#xe95b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe95c;</span>
                <div class="name">editor-border</div>
                <div class="code-name">&amp;#xe95c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe95d;</span>
                <div class="name">editor-anchor</div>
                <div class="code-name">&amp;#xe95d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe95e;</span>
                <div class="name">editor-border-none</div>
                <div class="code-name">&amp;#xe95e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe95f;</span>
                <div class="name">editor-border-horizontal</div>
                <div class="code-name">&amp;#xe95f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe960;</span>
                <div class="name">editor-border-outer</div>
                <div class="code-name">&amp;#xe960;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe961;</span>
                <div class="name">editor-border-inner</div>
                <div class="code-name">&amp;#xe961;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe962;</span>
                <div class="name">editor-border-radius-bl</div>
                <div class="code-name">&amp;#xe962;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe963;</span>
                <div class="name">editor-border-bottom</div>
                <div class="code-name">&amp;#xe963;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe964;</span>
                <div class="name">editor-border-radius-tl</div>
                <div class="code-name">&amp;#xe964;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe965;</span>
                <div class="name">editor-border-radius-br</div>
                <div class="code-name">&amp;#xe965;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe966;</span>
                <div class="name">editor-border-left</div>
                <div class="code-name">&amp;#xe966;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe967;</span>
                <div class="name">editor-border-radius-tr</div>
                <div class="code-name">&amp;#xe967;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe968;</span>
                <div class="name">editor-border-radius-setting</div>
                <div class="code-name">&amp;#xe968;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe969;</span>
                <div class="name">editor-bracket-mid</div>
                <div class="code-name">&amp;#xe969;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe96a;</span>
                <div class="name">editor-bracket-mark-right</div>
                <div class="code-name">&amp;#xe96a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe96b;</span>
                <div class="name">editor-bracket-big</div>
                <div class="code-name">&amp;#xe96b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe96c;</span>
                <div class="name">editor-border-right</div>
                <div class="code-name">&amp;#xe96c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe96d;</span>
                <div class="name">editor-bracket-mid-left-cn</div>
                <div class="code-name">&amp;#xe96d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe96e;</span>
                <div class="name">editor-bracket-mark-left</div>
                <div class="code-name">&amp;#xe96e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe96f;</span>
                <div class="name">editor-bracket-mid-right</div>
                <div class="code-name">&amp;#xe96f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe970;</span>
                <div class="name">editor-border-verticle</div>
                <div class="code-name">&amp;#xe970;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe971;</span>
                <div class="name">editor-bracket-mid-right-cn</div>
                <div class="code-name">&amp;#xe971;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe972;</span>
                <div class="name">editor-bracket-mid-left</div>
                <div class="code-name">&amp;#xe972;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe973;</span>
                <div class="name">editor-bracket-big-right</div>
                <div class="code-name">&amp;#xe973;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe974;</span>
                <div class="name">editor-bracket-big-left</div>
                <div class="code-name">&amp;#xe974;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe975;</span>
                <div class="name">editor-bracket-small</div>
                <div class="code-name">&amp;#xe975;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe976;</span>
                <div class="name">editor-border-top</div>
                <div class="code-name">&amp;#xe976;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe977;</span>
                <div class="name">editor-bracket-small-right</div>
                <div class="code-name">&amp;#xe977;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe978;</span>
                <div class="name">editor-cell-split</div>
                <div class="code-name">&amp;#xe978;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe979;</span>
                <div class="name">editor-cell-merge</div>
                <div class="code-name">&amp;#xe979;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe97a;</span>
                <div class="name">editor-bracket-small-left</div>
                <div class="code-name">&amp;#xe97a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe97b;</span>
                <div class="name">editor-chart</div>
                <div class="code-name">&amp;#xe97b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe97c;</span>
                <div class="name">editor-colum-height</div>
                <div class="code-name">&amp;#xe97c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe97d;</span>
                <div class="name">editor-brush</div>
                <div class="code-name">&amp;#xe97d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe97e;</span>
                <div class="name">editor-code</div>
                <div class="code-name">&amp;#xe97e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe97f;</span>
                <div class="name">editor-calendar</div>
                <div class="code-name">&amp;#xe97f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe980;</span>
                <div class="name">editor-column-add</div>
                <div class="code-name">&amp;#xe980;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe981;</span>
                <div class="name">editor-column-width</div>
                <div class="code-name">&amp;#xe981;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe982;</span>
                <div class="name">editor-dotted</div>
                <div class="code-name">&amp;#xe982;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe983;</span>
                <div class="name">editor-ellipsis</div>
                <div class="code-name">&amp;#xe983;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe984;</span>
                <div class="name">editor-divider</div>
                <div class="code-name">&amp;#xe984;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe985;</span>
                <div class="name">editor-cut</div>
                <div class="code-name">&amp;#xe985;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe986;</span>
                <div class="name">editor-dashed</div>
                <div class="code-name">&amp;#xe986;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe987;</span>
                <div class="name">editor-column-delete</div>
                <div class="code-name">&amp;#xe987;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe988;</span>
                <div class="name">editor-expression</div>
                <div class="code-name">&amp;#xe988;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe989;</span>
                <div class="name">editor-float-center</div>
                <div class="code-name">&amp;#xe989;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe98a;</span>
                <div class="name">editor-float-default</div>
                <div class="code-name">&amp;#xe98a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe98b;</span>
                <div class="name">editor-clear</div>
                <div class="code-name">&amp;#xe98b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe98c;</span>
                <div class="name">editor-float-left</div>
                <div class="code-name">&amp;#xe98c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe98d;</span>
                <div class="name">editor-font-bg</div>
                <div class="code-name">&amp;#xe98d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe98e;</span>
                <div class="name">editor-font</div>
                <div class="code-name">&amp;#xe98e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe98f;</span>
                <div class="name">editor-font-size</div>
                <div class="code-name">&amp;#xe98f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe990;</span>
                <div class="name">editor-font-medium</div>
                <div class="code-name">&amp;#xe990;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe991;</span>
                <div class="name">editor-font-border</div>
                <div class="code-name">&amp;#xe991;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe992;</span>
                <div class="name">editor-font-color</div>
                <div class="code-name">&amp;#xe992;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe993;</span>
                <div class="name">editor-float-right</div>
                <div class="code-name">&amp;#xe993;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe994;</span>
                <div class="name">editor-find-replace</div>
                <div class="code-name">&amp;#xe994;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe995;</span>
                <div class="name">editor-font-bold</div>
                <div class="code-name">&amp;#xe995;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe996;</span>
                <div class="name">editor-html</div>
                <div class="code-name">&amp;#xe996;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe997;</span>
                <div class="name">editor-help</div>
                <div class="code-name">&amp;#xe997;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe998;</span>
                <div class="name">editor-image</div>
                <div class="code-name">&amp;#xe998;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe999;</span>
                <div class="name">editor-iframe</div>
                <div class="code-name">&amp;#xe999;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe99a;</span>
                <div class="name">editor-indent</div>
                <div class="code-name">&amp;#xe99a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe99b;</span>
                <div class="name">editor-input-right</div>
                <div class="code-name">&amp;#xe99b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe99c;</span>
                <div class="name">editor-graffiti</div>
                <div class="code-name">&amp;#xe99c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe99d;</span>
                <div class="name">editor-input-left</div>
                <div class="code-name">&amp;#xe99d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe99e;</span>
                <div class="name">editor-image-import</div>
                <div class="code-name">&amp;#xe99e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe99f;</span>
                <div class="name">editor-italic</div>
                <div class="code-name">&amp;#xe99f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a0;</span>
                <div class="name">editor-line-height</div>
                <div class="code-name">&amp;#xe9a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a1;</span>
                <div class="name">editor-function</div>
                <div class="code-name">&amp;#xe9a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a2;</span>
                <div class="name">editor-list-order</div>
                <div class="code-name">&amp;#xe9a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a3;</span>
                <div class="name">editor-link</div>
                <div class="code-name">&amp;#xe9a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a4;</span>
                <div class="name">editor-list-disorder</div>
                <div class="code-name">&amp;#xe9a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a5;</span>
                <div class="name">editor-lock</div>
                <div class="code-name">&amp;#xe9a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe9a6;</span>
                <div class="name">editor-link-delete</div>
                <div class="code-name">&amp;#xe9a6;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-editor-map-google"></span>
            <div class="name">
              editor-map-google
            </div>
            <div class="code-name">.icon-editor-map-google
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-outdent"></span>
            <div class="name">
              editor-outdent
            </div>
            <div class="code-name">.icon-editor-outdent
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-margin-bottom"></span>
            <div class="name">
              editor-margin-bottom
            </div>
            <div class="code-name">.icon-editor-margin-bottom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-music"></span>
            <div class="name">
              editor-music
            </div>
            <div class="code-name">.icon-editor-music
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-paging"></span>
            <div class="name">
              editor-paging
            </div>
            <div class="code-name">.icon-editor-paging
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-map-baidu"></span>
            <div class="name">
              editor-map-baidu
            </div>
            <div class="code-name">.icon-editor-map-baidu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-margin-top"></span>
            <div class="name">
              editor-margin-top
            </div>
            <div class="code-name">.icon-editor-margin-top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-pic-right"></span>
            <div class="name">
              editor-pic-right
            </div>
            <div class="code-name">.icon-editor-pic-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-pic-center"></span>
            <div class="name">
              editor-pic-center
            </div>
            <div class="code-name">.icon-editor-pic-center
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-paragraph"></span>
            <div class="name">
              editor-paragraph
            </div>
            <div class="code-name">.icon-editor-paragraph
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-paste-txt"></span>
            <div class="name">
              editor-paste-txt
            </div>
            <div class="code-name">.icon-editor-paste-txt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-pic-left"></span>
            <div class="name">
              editor-pic-left
            </div>
            <div class="code-name">.icon-editor-pic-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-preview"></span>
            <div class="name">
              editor-preview
            </div>
            <div class="code-name">.icon-editor-preview
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-paste"></span>
            <div class="name">
              editor-paste
            </div>
            <div class="code-name">.icon-editor-paste
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-printer"></span>
            <div class="name">
              editor-printer
            </div>
            <div class="code-name">.icon-editor-printer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-quotation-marks-left"></span>
            <div class="name">
              editor-quotation-marks-left
            </div>
            <div class="code-name">.icon-editor-quotation-marks-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-redo"></span>
            <div class="name">
              editor-redo
            </div>
            <div class="code-name">.icon-editor-redo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-screen-exit"></span>
            <div class="name">
              editor-screen-exit
            </div>
            <div class="code-name">.icon-editor-screen-exit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-row-add"></span>
            <div class="name">
              editor-row-add
            </div>
            <div class="code-name">.icon-editor-row-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-quotation-marks-right"></span>
            <div class="name">
              editor-quotation-marks-right
            </div>
            <div class="code-name">.icon-editor-quotation-marks-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-screen-full"></span>
            <div class="name">
              editor-screen-full
            </div>
            <div class="code-name">.icon-editor-screen-full
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-row-delete"></span>
            <div class="name">
              editor-row-delete
            </div>
            <div class="code-name">.icon-editor-row-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-screenshot"></span>
            <div class="name">
              editor-screenshot
            </div>
            <div class="code-name">.icon-editor-screenshot
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-single-quotationmarks-right"></span>
            <div class="name">
              editor-single-quotation marks-right
            </div>
            <div class="code-name">.icon-editor-single-quotationmarks-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-subscript"></span>
            <div class="name">
              editor-subscript
            </div>
            <div class="code-name">.icon-editor-subscript
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-special-characters"></span>
            <div class="name">
              editor-special-characters
            </div>
            <div class="code-name">.icon-editor-special-characters
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-single-quotationmarks-left"></span>
            <div class="name">
              editor-single-quotation marks-left
            </div>
            <div class="code-name">.icon-editor-single-quotationmarks-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-superscript"></span>
            <div class="name">
              editor-superscript
            </div>
            <div class="code-name">.icon-editor-superscript
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-strikethrough"></span>
            <div class="name">
              editor-strikethrough
            </div>
            <div class="code-name">.icon-editor-strikethrough
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-selectall"></span>
            <div class="name">
              editor-selectall
            </div>
            <div class="code-name">.icon-editor-selectall
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-table"></span>
            <div class="name">
              editor-table
            </div>
            <div class="code-name">.icon-editor-table
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-text"></span>
            <div class="name">
              editor-text
            </div>
            <div class="code-name">.icon-editor-text
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-template"></span>
            <div class="name">
              editor-template
            </div>
            <div class="code-name">.icon-editor-template
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-to-capitalize"></span>
            <div class="name">
              editor-to-capitalize
            </div>
            <div class="code-name">.icon-editor-to-capitalize
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-undo"></span>
            <div class="name">
              editor-undo
            </div>
            <div class="code-name">.icon-editor-undo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-vertical-bottom"></span>
            <div class="name">
              editor-vertical-bottom
            </div>
            <div class="code-name">.icon-editor-vertical-bottom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-typesetting"></span>
            <div class="name">
              editor-typesetting
            </div>
            <div class="code-name">.icon-editor-typesetting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-vertical-both"></span>
            <div class="name">
              editor-vertical-both
            </div>
            <div class="code-name">.icon-editor-vertical-both
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-vertical-center"></span>
            <div class="name">
              editor-vertical-center
            </div>
            <div class="code-name">.icon-editor-vertical-center
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-to-lowercase"></span>
            <div class="name">
              editor-to-lowercase
            </div>
            <div class="code-name">.icon-editor-to-lowercase
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-vertical-left"></span>
            <div class="name">
              editor-vertical-left
            </div>
            <div class="code-name">.icon-editor-vertical-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-underline"></span>
            <div class="name">
              editor-underline
            </div>
            <div class="code-name">.icon-editor-underline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-vertical-top"></span>
            <div class="name">
              editor-vertical-top
            </div>
            <div class="code-name">.icon-editor-vertical-top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-vertical-right"></span>
            <div class="name">
              editor-vertical-right
            </div>
            <div class="code-name">.icon-editor-vertical-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-align-center"></span>
            <div class="name">
              editor-align-center
            </div>
            <div class="code-name">.icon-editor-align-center
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-video"></span>
            <div class="name">
              editor-video
            </div>
            <div class="code-name">.icon-editor-video
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-align-both"></span>
            <div class="name">
              editor-align-both
            </div>
            <div class="code-name">.icon-editor-align-both
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-time"></span>
            <div class="name">
              editor-time
            </div>
            <div class="code-name">.icon-editor-time
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-align-left"></span>
            <div class="name">
              editor-align-left
            </div>
            <div class="code-name">.icon-editor-align-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-bg"></span>
            <div class="name">
              editor-bg
            </div>
            <div class="code-name">.icon-editor-bg
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-align-right"></span>
            <div class="name">
              editor-align-right
            </div>
            <div class="code-name">.icon-editor-align-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-attachment"></span>
            <div class="name">
              editor-attachment
            </div>
            <div class="code-name">.icon-editor-attachment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-bgcolor"></span>
            <div class="name">
              editor-bgcolor
            </div>
            <div class="code-name">.icon-editor-bgcolor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-border"></span>
            <div class="name">
              editor-border
            </div>
            <div class="code-name">.icon-editor-border
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-anchor"></span>
            <div class="name">
              editor-anchor
            </div>
            <div class="code-name">.icon-editor-anchor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-border-none"></span>
            <div class="name">
              editor-border-none
            </div>
            <div class="code-name">.icon-editor-border-none
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-border-horizontal"></span>
            <div class="name">
              editor-border-horizontal
            </div>
            <div class="code-name">.icon-editor-border-horizontal
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-border-outer"></span>
            <div class="name">
              editor-border-outer
            </div>
            <div class="code-name">.icon-editor-border-outer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-border-inner"></span>
            <div class="name">
              editor-border-inner
            </div>
            <div class="code-name">.icon-editor-border-inner
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-border-radius-bl"></span>
            <div class="name">
              editor-border-radius-bl
            </div>
            <div class="code-name">.icon-editor-border-radius-bl
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-border-bottom"></span>
            <div class="name">
              editor-border-bottom
            </div>
            <div class="code-name">.icon-editor-border-bottom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-border-radius-tl"></span>
            <div class="name">
              editor-border-radius-tl
            </div>
            <div class="code-name">.icon-editor-border-radius-tl
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-border-radius-br"></span>
            <div class="name">
              editor-border-radius-br
            </div>
            <div class="code-name">.icon-editor-border-radius-br
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-border-left"></span>
            <div class="name">
              editor-border-left
            </div>
            <div class="code-name">.icon-editor-border-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-border-radius-tr"></span>
            <div class="name">
              editor-border-radius-tr
            </div>
            <div class="code-name">.icon-editor-border-radius-tr
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-border-radius-setting"></span>
            <div class="name">
              editor-border-radius-setting
            </div>
            <div class="code-name">.icon-editor-border-radius-setting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-bracket-mid"></span>
            <div class="name">
              editor-bracket-mid
            </div>
            <div class="code-name">.icon-editor-bracket-mid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-bracket-mark-right"></span>
            <div class="name">
              editor-bracket-mark-right
            </div>
            <div class="code-name">.icon-editor-bracket-mark-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-bracket-big"></span>
            <div class="name">
              editor-bracket-big
            </div>
            <div class="code-name">.icon-editor-bracket-big
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-border-right"></span>
            <div class="name">
              editor-border-right
            </div>
            <div class="code-name">.icon-editor-border-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-bracket-mid-left-cn"></span>
            <div class="name">
              editor-bracket-mid-left-cn
            </div>
            <div class="code-name">.icon-editor-bracket-mid-left-cn
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-bracket-mark-left"></span>
            <div class="name">
              editor-bracket-mark-left
            </div>
            <div class="code-name">.icon-editor-bracket-mark-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-bracket-mid-right"></span>
            <div class="name">
              editor-bracket-mid-right
            </div>
            <div class="code-name">.icon-editor-bracket-mid-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-border-verticle"></span>
            <div class="name">
              editor-border-verticle
            </div>
            <div class="code-name">.icon-editor-border-verticle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-bracket-mid-right-cn"></span>
            <div class="name">
              editor-bracket-mid-right-cn
            </div>
            <div class="code-name">.icon-editor-bracket-mid-right-cn
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-bracket-mid-left"></span>
            <div class="name">
              editor-bracket-mid-left
            </div>
            <div class="code-name">.icon-editor-bracket-mid-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-bracket-big-right"></span>
            <div class="name">
              editor-bracket-big-right
            </div>
            <div class="code-name">.icon-editor-bracket-big-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-bracket-big-left"></span>
            <div class="name">
              editor-bracket-big-left
            </div>
            <div class="code-name">.icon-editor-bracket-big-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-bracket-small"></span>
            <div class="name">
              editor-bracket-small
            </div>
            <div class="code-name">.icon-editor-bracket-small
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-border-top"></span>
            <div class="name">
              editor-border-top
            </div>
            <div class="code-name">.icon-editor-border-top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-bracket-small-right"></span>
            <div class="name">
              editor-bracket-small-right
            </div>
            <div class="code-name">.icon-editor-bracket-small-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-cell-split"></span>
            <div class="name">
              editor-cell-split
            </div>
            <div class="code-name">.icon-editor-cell-split
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-cell-merge"></span>
            <div class="name">
              editor-cell-merge
            </div>
            <div class="code-name">.icon-editor-cell-merge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-bracket-small-left"></span>
            <div class="name">
              editor-bracket-small-left
            </div>
            <div class="code-name">.icon-editor-bracket-small-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-chart"></span>
            <div class="name">
              editor-chart
            </div>
            <div class="code-name">.icon-editor-chart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-colum-height"></span>
            <div class="name">
              editor-colum-height
            </div>
            <div class="code-name">.icon-editor-colum-height
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-brush"></span>
            <div class="name">
              editor-brush
            </div>
            <div class="code-name">.icon-editor-brush
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-code"></span>
            <div class="name">
              editor-code
            </div>
            <div class="code-name">.icon-editor-code
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-calendar"></span>
            <div class="name">
              editor-calendar
            </div>
            <div class="code-name">.icon-editor-calendar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-column-add"></span>
            <div class="name">
              editor-column-add
            </div>
            <div class="code-name">.icon-editor-column-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-column-width"></span>
            <div class="name">
              editor-column-width
            </div>
            <div class="code-name">.icon-editor-column-width
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-dotted"></span>
            <div class="name">
              editor-dotted
            </div>
            <div class="code-name">.icon-editor-dotted
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-ellipsis"></span>
            <div class="name">
              editor-ellipsis
            </div>
            <div class="code-name">.icon-editor-ellipsis
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-divider"></span>
            <div class="name">
              editor-divider
            </div>
            <div class="code-name">.icon-editor-divider
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-cut"></span>
            <div class="name">
              editor-cut
            </div>
            <div class="code-name">.icon-editor-cut
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-dashed"></span>
            <div class="name">
              editor-dashed
            </div>
            <div class="code-name">.icon-editor-dashed
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-column-delete"></span>
            <div class="name">
              editor-column-delete
            </div>
            <div class="code-name">.icon-editor-column-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-expression"></span>
            <div class="name">
              editor-expression
            </div>
            <div class="code-name">.icon-editor-expression
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-float-center"></span>
            <div class="name">
              editor-float-center
            </div>
            <div class="code-name">.icon-editor-float-center
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-float-default"></span>
            <div class="name">
              editor-float-default
            </div>
            <div class="code-name">.icon-editor-float-default
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-clear"></span>
            <div class="name">
              editor-clear
            </div>
            <div class="code-name">.icon-editor-clear
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-float-left"></span>
            <div class="name">
              editor-float-left
            </div>
            <div class="code-name">.icon-editor-float-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-font-bg"></span>
            <div class="name">
              editor-font-bg
            </div>
            <div class="code-name">.icon-editor-font-bg
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-font"></span>
            <div class="name">
              editor-font
            </div>
            <div class="code-name">.icon-editor-font
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-font-size"></span>
            <div class="name">
              editor-font-size
            </div>
            <div class="code-name">.icon-editor-font-size
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-font-medium"></span>
            <div class="name">
              editor-font-medium
            </div>
            <div class="code-name">.icon-editor-font-medium
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-font-border"></span>
            <div class="name">
              editor-font-border
            </div>
            <div class="code-name">.icon-editor-font-border
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-font-color"></span>
            <div class="name">
              editor-font-color
            </div>
            <div class="code-name">.icon-editor-font-color
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-float-right"></span>
            <div class="name">
              editor-float-right
            </div>
            <div class="code-name">.icon-editor-float-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-find-replace"></span>
            <div class="name">
              editor-find-replace
            </div>
            <div class="code-name">.icon-editor-find-replace
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-font-bold"></span>
            <div class="name">
              editor-font-bold
            </div>
            <div class="code-name">.icon-editor-font-bold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-html"></span>
            <div class="name">
              editor-html
            </div>
            <div class="code-name">.icon-editor-html
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-help"></span>
            <div class="name">
              editor-help
            </div>
            <div class="code-name">.icon-editor-help
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-image"></span>
            <div class="name">
              editor-image
            </div>
            <div class="code-name">.icon-editor-image
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-iframe"></span>
            <div class="name">
              editor-iframe
            </div>
            <div class="code-name">.icon-editor-iframe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-indent"></span>
            <div class="name">
              editor-indent
            </div>
            <div class="code-name">.icon-editor-indent
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-input-right"></span>
            <div class="name">
              editor-input-right
            </div>
            <div class="code-name">.icon-editor-input-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-graffiti"></span>
            <div class="name">
              editor-graffiti
            </div>
            <div class="code-name">.icon-editor-graffiti
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-input-left"></span>
            <div class="name">
              editor-input-left
            </div>
            <div class="code-name">.icon-editor-input-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-image-import"></span>
            <div class="name">
              editor-image-import
            </div>
            <div class="code-name">.icon-editor-image-import
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-italic"></span>
            <div class="name">
              editor-italic
            </div>
            <div class="code-name">.icon-editor-italic
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-line-height"></span>
            <div class="name">
              editor-line-height
            </div>
            <div class="code-name">.icon-editor-line-height
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-function"></span>
            <div class="name">
              editor-function
            </div>
            <div class="code-name">.icon-editor-function
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-list-order"></span>
            <div class="name">
              editor-list-order
            </div>
            <div class="code-name">.icon-editor-list-order
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-link"></span>
            <div class="name">
              editor-link
            </div>
            <div class="code-name">.icon-editor-link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-list-disorder"></span>
            <div class="name">
              editor-list-disorder
            </div>
            <div class="code-name">.icon-editor-list-disorder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-lock"></span>
            <div class="name">
              editor-lock
            </div>
            <div class="code-name">.icon-editor-lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-editor-link-delete"></span>
            <div class="name">
              editor-link-delete
            </div>
            <div class="code-name">.icon-editor-link-delete
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-map-google"></use>
                </svg>
                <div class="name">editor-map-google</div>
                <div class="code-name">#icon-editor-map-google</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-outdent"></use>
                </svg>
                <div class="name">editor-outdent</div>
                <div class="code-name">#icon-editor-outdent</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-margin-bottom"></use>
                </svg>
                <div class="name">editor-margin-bottom</div>
                <div class="code-name">#icon-editor-margin-bottom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-music"></use>
                </svg>
                <div class="name">editor-music</div>
                <div class="code-name">#icon-editor-music</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-paging"></use>
                </svg>
                <div class="name">editor-paging</div>
                <div class="code-name">#icon-editor-paging</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-map-baidu"></use>
                </svg>
                <div class="name">editor-map-baidu</div>
                <div class="code-name">#icon-editor-map-baidu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-margin-top"></use>
                </svg>
                <div class="name">editor-margin-top</div>
                <div class="code-name">#icon-editor-margin-top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-pic-right"></use>
                </svg>
                <div class="name">editor-pic-right</div>
                <div class="code-name">#icon-editor-pic-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-pic-center"></use>
                </svg>
                <div class="name">editor-pic-center</div>
                <div class="code-name">#icon-editor-pic-center</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-paragraph"></use>
                </svg>
                <div class="name">editor-paragraph</div>
                <div class="code-name">#icon-editor-paragraph</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-paste-txt"></use>
                </svg>
                <div class="name">editor-paste-txt</div>
                <div class="code-name">#icon-editor-paste-txt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-pic-left"></use>
                </svg>
                <div class="name">editor-pic-left</div>
                <div class="code-name">#icon-editor-pic-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-preview"></use>
                </svg>
                <div class="name">editor-preview</div>
                <div class="code-name">#icon-editor-preview</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-paste"></use>
                </svg>
                <div class="name">editor-paste</div>
                <div class="code-name">#icon-editor-paste</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-printer"></use>
                </svg>
                <div class="name">editor-printer</div>
                <div class="code-name">#icon-editor-printer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-quotation-marks-left"></use>
                </svg>
                <div class="name">editor-quotation-marks-left</div>
                <div class="code-name">#icon-editor-quotation-marks-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-redo"></use>
                </svg>
                <div class="name">editor-redo</div>
                <div class="code-name">#icon-editor-redo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-screen-exit"></use>
                </svg>
                <div class="name">editor-screen-exit</div>
                <div class="code-name">#icon-editor-screen-exit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-row-add"></use>
                </svg>
                <div class="name">editor-row-add</div>
                <div class="code-name">#icon-editor-row-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-quotation-marks-right"></use>
                </svg>
                <div class="name">editor-quotation-marks-right</div>
                <div class="code-name">#icon-editor-quotation-marks-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-screen-full"></use>
                </svg>
                <div class="name">editor-screen-full</div>
                <div class="code-name">#icon-editor-screen-full</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-row-delete"></use>
                </svg>
                <div class="name">editor-row-delete</div>
                <div class="code-name">#icon-editor-row-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-screenshot"></use>
                </svg>
                <div class="name">editor-screenshot</div>
                <div class="code-name">#icon-editor-screenshot</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-single-quotationmarks-right"></use>
                </svg>
                <div class="name">editor-single-quotation marks-right</div>
                <div class="code-name">#icon-editor-single-quotationmarks-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-subscript"></use>
                </svg>
                <div class="name">editor-subscript</div>
                <div class="code-name">#icon-editor-subscript</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-special-characters"></use>
                </svg>
                <div class="name">editor-special-characters</div>
                <div class="code-name">#icon-editor-special-characters</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-single-quotationmarks-left"></use>
                </svg>
                <div class="name">editor-single-quotation marks-left</div>
                <div class="code-name">#icon-editor-single-quotationmarks-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-superscript"></use>
                </svg>
                <div class="name">editor-superscript</div>
                <div class="code-name">#icon-editor-superscript</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-strikethrough"></use>
                </svg>
                <div class="name">editor-strikethrough</div>
                <div class="code-name">#icon-editor-strikethrough</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-selectall"></use>
                </svg>
                <div class="name">editor-selectall</div>
                <div class="code-name">#icon-editor-selectall</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-table"></use>
                </svg>
                <div class="name">editor-table</div>
                <div class="code-name">#icon-editor-table</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-text"></use>
                </svg>
                <div class="name">editor-text</div>
                <div class="code-name">#icon-editor-text</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-template"></use>
                </svg>
                <div class="name">editor-template</div>
                <div class="code-name">#icon-editor-template</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-to-capitalize"></use>
                </svg>
                <div class="name">editor-to-capitalize</div>
                <div class="code-name">#icon-editor-to-capitalize</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-undo"></use>
                </svg>
                <div class="name">editor-undo</div>
                <div class="code-name">#icon-editor-undo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-vertical-bottom"></use>
                </svg>
                <div class="name">editor-vertical-bottom</div>
                <div class="code-name">#icon-editor-vertical-bottom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-typesetting"></use>
                </svg>
                <div class="name">editor-typesetting</div>
                <div class="code-name">#icon-editor-typesetting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-vertical-both"></use>
                </svg>
                <div class="name">editor-vertical-both</div>
                <div class="code-name">#icon-editor-vertical-both</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-vertical-center"></use>
                </svg>
                <div class="name">editor-vertical-center</div>
                <div class="code-name">#icon-editor-vertical-center</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-to-lowercase"></use>
                </svg>
                <div class="name">editor-to-lowercase</div>
                <div class="code-name">#icon-editor-to-lowercase</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-vertical-left"></use>
                </svg>
                <div class="name">editor-vertical-left</div>
                <div class="code-name">#icon-editor-vertical-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-underline"></use>
                </svg>
                <div class="name">editor-underline</div>
                <div class="code-name">#icon-editor-underline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-vertical-top"></use>
                </svg>
                <div class="name">editor-vertical-top</div>
                <div class="code-name">#icon-editor-vertical-top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-vertical-right"></use>
                </svg>
                <div class="name">editor-vertical-right</div>
                <div class="code-name">#icon-editor-vertical-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-align-center"></use>
                </svg>
                <div class="name">editor-align-center</div>
                <div class="code-name">#icon-editor-align-center</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-video"></use>
                </svg>
                <div class="name">editor-video</div>
                <div class="code-name">#icon-editor-video</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-align-both"></use>
                </svg>
                <div class="name">editor-align-both</div>
                <div class="code-name">#icon-editor-align-both</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-time"></use>
                </svg>
                <div class="name">editor-time</div>
                <div class="code-name">#icon-editor-time</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-align-left"></use>
                </svg>
                <div class="name">editor-align-left</div>
                <div class="code-name">#icon-editor-align-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-bg"></use>
                </svg>
                <div class="name">editor-bg</div>
                <div class="code-name">#icon-editor-bg</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-align-right"></use>
                </svg>
                <div class="name">editor-align-right</div>
                <div class="code-name">#icon-editor-align-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-attachment"></use>
                </svg>
                <div class="name">editor-attachment</div>
                <div class="code-name">#icon-editor-attachment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-bgcolor"></use>
                </svg>
                <div class="name">editor-bgcolor</div>
                <div class="code-name">#icon-editor-bgcolor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-border"></use>
                </svg>
                <div class="name">editor-border</div>
                <div class="code-name">#icon-editor-border</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-anchor"></use>
                </svg>
                <div class="name">editor-anchor</div>
                <div class="code-name">#icon-editor-anchor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-border-none"></use>
                </svg>
                <div class="name">editor-border-none</div>
                <div class="code-name">#icon-editor-border-none</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-border-horizontal"></use>
                </svg>
                <div class="name">editor-border-horizontal</div>
                <div class="code-name">#icon-editor-border-horizontal</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-border-outer"></use>
                </svg>
                <div class="name">editor-border-outer</div>
                <div class="code-name">#icon-editor-border-outer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-border-inner"></use>
                </svg>
                <div class="name">editor-border-inner</div>
                <div class="code-name">#icon-editor-border-inner</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-border-radius-bl"></use>
                </svg>
                <div class="name">editor-border-radius-bl</div>
                <div class="code-name">#icon-editor-border-radius-bl</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-border-bottom"></use>
                </svg>
                <div class="name">editor-border-bottom</div>
                <div class="code-name">#icon-editor-border-bottom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-border-radius-tl"></use>
                </svg>
                <div class="name">editor-border-radius-tl</div>
                <div class="code-name">#icon-editor-border-radius-tl</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-border-radius-br"></use>
                </svg>
                <div class="name">editor-border-radius-br</div>
                <div class="code-name">#icon-editor-border-radius-br</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-border-left"></use>
                </svg>
                <div class="name">editor-border-left</div>
                <div class="code-name">#icon-editor-border-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-border-radius-tr"></use>
                </svg>
                <div class="name">editor-border-radius-tr</div>
                <div class="code-name">#icon-editor-border-radius-tr</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-border-radius-setting"></use>
                </svg>
                <div class="name">editor-border-radius-setting</div>
                <div class="code-name">#icon-editor-border-radius-setting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-bracket-mid"></use>
                </svg>
                <div class="name">editor-bracket-mid</div>
                <div class="code-name">#icon-editor-bracket-mid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-bracket-mark-right"></use>
                </svg>
                <div class="name">editor-bracket-mark-right</div>
                <div class="code-name">#icon-editor-bracket-mark-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-bracket-big"></use>
                </svg>
                <div class="name">editor-bracket-big</div>
                <div class="code-name">#icon-editor-bracket-big</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-border-right"></use>
                </svg>
                <div class="name">editor-border-right</div>
                <div class="code-name">#icon-editor-border-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-bracket-mid-left-cn"></use>
                </svg>
                <div class="name">editor-bracket-mid-left-cn</div>
                <div class="code-name">#icon-editor-bracket-mid-left-cn</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-bracket-mark-left"></use>
                </svg>
                <div class="name">editor-bracket-mark-left</div>
                <div class="code-name">#icon-editor-bracket-mark-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-bracket-mid-right"></use>
                </svg>
                <div class="name">editor-bracket-mid-right</div>
                <div class="code-name">#icon-editor-bracket-mid-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-border-verticle"></use>
                </svg>
                <div class="name">editor-border-verticle</div>
                <div class="code-name">#icon-editor-border-verticle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-bracket-mid-right-cn"></use>
                </svg>
                <div class="name">editor-bracket-mid-right-cn</div>
                <div class="code-name">#icon-editor-bracket-mid-right-cn</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-bracket-mid-left"></use>
                </svg>
                <div class="name">editor-bracket-mid-left</div>
                <div class="code-name">#icon-editor-bracket-mid-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-bracket-big-right"></use>
                </svg>
                <div class="name">editor-bracket-big-right</div>
                <div class="code-name">#icon-editor-bracket-big-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-bracket-big-left"></use>
                </svg>
                <div class="name">editor-bracket-big-left</div>
                <div class="code-name">#icon-editor-bracket-big-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-bracket-small"></use>
                </svg>
                <div class="name">editor-bracket-small</div>
                <div class="code-name">#icon-editor-bracket-small</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-border-top"></use>
                </svg>
                <div class="name">editor-border-top</div>
                <div class="code-name">#icon-editor-border-top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-bracket-small-right"></use>
                </svg>
                <div class="name">editor-bracket-small-right</div>
                <div class="code-name">#icon-editor-bracket-small-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-cell-split"></use>
                </svg>
                <div class="name">editor-cell-split</div>
                <div class="code-name">#icon-editor-cell-split</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-cell-merge"></use>
                </svg>
                <div class="name">editor-cell-merge</div>
                <div class="code-name">#icon-editor-cell-merge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-bracket-small-left"></use>
                </svg>
                <div class="name">editor-bracket-small-left</div>
                <div class="code-name">#icon-editor-bracket-small-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-chart"></use>
                </svg>
                <div class="name">editor-chart</div>
                <div class="code-name">#icon-editor-chart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-colum-height"></use>
                </svg>
                <div class="name">editor-colum-height</div>
                <div class="code-name">#icon-editor-colum-height</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-brush"></use>
                </svg>
                <div class="name">editor-brush</div>
                <div class="code-name">#icon-editor-brush</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-code"></use>
                </svg>
                <div class="name">editor-code</div>
                <div class="code-name">#icon-editor-code</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-calendar"></use>
                </svg>
                <div class="name">editor-calendar</div>
                <div class="code-name">#icon-editor-calendar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-column-add"></use>
                </svg>
                <div class="name">editor-column-add</div>
                <div class="code-name">#icon-editor-column-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-column-width"></use>
                </svg>
                <div class="name">editor-column-width</div>
                <div class="code-name">#icon-editor-column-width</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-dotted"></use>
                </svg>
                <div class="name">editor-dotted</div>
                <div class="code-name">#icon-editor-dotted</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-ellipsis"></use>
                </svg>
                <div class="name">editor-ellipsis</div>
                <div class="code-name">#icon-editor-ellipsis</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-divider"></use>
                </svg>
                <div class="name">editor-divider</div>
                <div class="code-name">#icon-editor-divider</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-cut"></use>
                </svg>
                <div class="name">editor-cut</div>
                <div class="code-name">#icon-editor-cut</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-dashed"></use>
                </svg>
                <div class="name">editor-dashed</div>
                <div class="code-name">#icon-editor-dashed</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-column-delete"></use>
                </svg>
                <div class="name">editor-column-delete</div>
                <div class="code-name">#icon-editor-column-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-expression"></use>
                </svg>
                <div class="name">editor-expression</div>
                <div class="code-name">#icon-editor-expression</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-float-center"></use>
                </svg>
                <div class="name">editor-float-center</div>
                <div class="code-name">#icon-editor-float-center</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-float-default"></use>
                </svg>
                <div class="name">editor-float-default</div>
                <div class="code-name">#icon-editor-float-default</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-clear"></use>
                </svg>
                <div class="name">editor-clear</div>
                <div class="code-name">#icon-editor-clear</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-float-left"></use>
                </svg>
                <div class="name">editor-float-left</div>
                <div class="code-name">#icon-editor-float-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-font-bg"></use>
                </svg>
                <div class="name">editor-font-bg</div>
                <div class="code-name">#icon-editor-font-bg</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-font"></use>
                </svg>
                <div class="name">editor-font</div>
                <div class="code-name">#icon-editor-font</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-font-size"></use>
                </svg>
                <div class="name">editor-font-size</div>
                <div class="code-name">#icon-editor-font-size</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-font-medium"></use>
                </svg>
                <div class="name">editor-font-medium</div>
                <div class="code-name">#icon-editor-font-medium</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-font-border"></use>
                </svg>
                <div class="name">editor-font-border</div>
                <div class="code-name">#icon-editor-font-border</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-font-color"></use>
                </svg>
                <div class="name">editor-font-color</div>
                <div class="code-name">#icon-editor-font-color</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-float-right"></use>
                </svg>
                <div class="name">editor-float-right</div>
                <div class="code-name">#icon-editor-float-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-find-replace"></use>
                </svg>
                <div class="name">editor-find-replace</div>
                <div class="code-name">#icon-editor-find-replace</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-font-bold"></use>
                </svg>
                <div class="name">editor-font-bold</div>
                <div class="code-name">#icon-editor-font-bold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-html"></use>
                </svg>
                <div class="name">editor-html</div>
                <div class="code-name">#icon-editor-html</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-help"></use>
                </svg>
                <div class="name">editor-help</div>
                <div class="code-name">#icon-editor-help</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-image"></use>
                </svg>
                <div class="name">editor-image</div>
                <div class="code-name">#icon-editor-image</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-iframe"></use>
                </svg>
                <div class="name">editor-iframe</div>
                <div class="code-name">#icon-editor-iframe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-indent"></use>
                </svg>
                <div class="name">editor-indent</div>
                <div class="code-name">#icon-editor-indent</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-input-right"></use>
                </svg>
                <div class="name">editor-input-right</div>
                <div class="code-name">#icon-editor-input-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-graffiti"></use>
                </svg>
                <div class="name">editor-graffiti</div>
                <div class="code-name">#icon-editor-graffiti</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-input-left"></use>
                </svg>
                <div class="name">editor-input-left</div>
                <div class="code-name">#icon-editor-input-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-image-import"></use>
                </svg>
                <div class="name">editor-image-import</div>
                <div class="code-name">#icon-editor-image-import</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-italic"></use>
                </svg>
                <div class="name">editor-italic</div>
                <div class="code-name">#icon-editor-italic</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-line-height"></use>
                </svg>
                <div class="name">editor-line-height</div>
                <div class="code-name">#icon-editor-line-height</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-function"></use>
                </svg>
                <div class="name">editor-function</div>
                <div class="code-name">#icon-editor-function</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-list-order"></use>
                </svg>
                <div class="name">editor-list-order</div>
                <div class="code-name">#icon-editor-list-order</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-link"></use>
                </svg>
                <div class="name">editor-link</div>
                <div class="code-name">#icon-editor-link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-list-disorder"></use>
                </svg>
                <div class="name">editor-list-disorder</div>
                <div class="code-name">#icon-editor-list-disorder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-lock"></use>
                </svg>
                <div class="name">editor-lock</div>
                <div class="code-name">#icon-editor-lock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-editor-link-delete"></use>
                </svg>
                <div class="name">editor-link-delete</div>
                <div class="code-name">#icon-editor-link-delete</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
